import React, { Component } from 'react';
import { Layout, Menu } from 'antd';
import { BulbTwoTone } from '@ant-design/icons'
import { Outlet, useNavigate } from 'react-router-dom';

// const { Menu } = Menu
const { Sider, Content } = Layout


const Method = (props) => {
    const navigator = useNavigate()

    function nav(e) {
        if (e.key === 'string') {
            navigator(`/method`)
        } else {
            navigator(`/method/${e.key}`)
        }
    }

    return (
        <Layout style={{ padding: '24px 0', background: '#fff' }}>
            <Sider width={200} style={{ background: '#fff' }}>
                <Menu
                    mode="inline"
                    defaultSelectedKeys={['string']}
                    style={{ height: '100%' }}
                >
                    <Menu.Item key="string" onClick={e => nav(e)}>
                        <BulbTwoTone />
                        <span>字符串</span>
                    </Menu.Item>
                    <Menu.Item key="array" onClick={e => nav(e)}>
                        <BulbTwoTone />
                        <span>数组</span>
                    </Menu.Item>
                    <Menu.Item key="object" onClick={e => nav(e)}>
                        <BulbTwoTone />
                        <span>对象</span>
                    </Menu.Item>
                    {/* <SubMenu
                            key="sub1"
                            title={
                                <span>
                                    <Icon type="user" />
                                    
                                </span>
                            }
                        >
                            <Menu.Item key="1">hooks</Menu.Item>
                            <Menu.Item key="2"><Link to='zjjj'>组件进阶</Link></Menu.Item>
                          <Menu.Item key="3">option3</Menu.Item>
                            <Menu.Item key="4">option4</Menu.Item>
                        </SubMenu> */}
                </Menu>
            </Sider>
            <Content style={{ padding: '0 24px', minHeight: 485, }}>
                <Outlet />
            </Content>
        </Layout >
    );

}

export default Method;